<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        #canvas {}
    </style>
</head>

<body>
    <canvas id="canvas"></canvas>
</body>

<!-- 顶点着色器 -->
<script id="vertexShader" type="x-shader/x-vertex">
    attribute vec4 a_Position;
    attribute float a_PointSize;
    void main(){
        gl_Position = a_Position;
        gl_PointSize = a_PointSize;
    }
</script>
<!-- 片元着色器 -->
<!-- 注意:第一行的精度一定要加 -->
<script id="fragmentShader" type="x-shader/x-fragment">
    precision mediump float;
    vec4 v=vec4(1,2,3,4)*vec4(5,6,7,8);
    uniform vec4 u_Color;
    void main(){
      gl_FragColor=v/255.0;
    }
</script>
<!-- 测试 -->
<script id="vertexShader10" type="x-shader/x-vertex">
    attribute vec4 a_Position;
    attribute float a_PointSize;
    uniform mat4 u_Vm4;
    void main(){
        gl_Position = a_Position * u_Vm4;
        gl_PointSize = a_PointSize;
    }
</script>
<script id="fragmentShader10" type="x-shader/x-fragment">
    precision mediump float;
    uniform vec4 u_Color;
    void main(){
      gl_FragColor=vec4(0,0,0,1);
    }
</script>
<!-- 打印标靶 -->
<script id="fragmentShader1" type="x-shader/x-fragment">
    precision mediump float;
    mat4 m = mat4(
        255,0,0,255,
        255,255,0,255,
        255,255,255,255,
        0,255,0,255
    );
    void main(){
        float dist = distance(gl_PointCoord,vec2(0.5,0.5));
        if(dist >= 0.5){
            gl_FragColor = vec4(0,0,0,1);
        }else if(dist >= 0.375){
            gl_FragColor = m[0];
        }else if(dist >= 0.25){
            gl_FragColor = m[1];
        }else if(dist >= 0.125){
            gl_FragColor = m[2];
        }else{
            gl_FragColor = m[3];
        }
    }
</script>
<!-- 四方格 -->
<script id="fragmentShader2" type="x-shader/x-fragment">
    precision mediump float;
    mat4 m = mat4(
        255,0,0,255,
        255,255,0,255,
        255,255,255,255,
        0,255,0,255
    );
    uniform vec2 u_CanvasWH;
    float width = u_CanvasWH.x / 2.0;
    float height = u_CanvasWH.y / 2.0;
    void main(){
        if(gl_FragCoord.y < height){
            if(gl_FragCoord.x < width){
                gl_FragColor = m[0] / 255.0;
            }else{
                gl_FragColor = m[1] / 255.0;
            }
        }else{
            if(gl_FragCoord.x < width){
                gl_FragColor = m[2] / 255.0;
            }else{
                gl_FragColor = m[3] / 255.0;
            }
        } 
    }
</script>
<script id="fragmentShader3" type="x-shader/x-fragment">
    precision mediump float;
    mat4 m = mat4(
        255,0,0,255,
        255,255,0,255,
        255,255,255,255,
        0,255,0,255
    );
    uniform vec2 u_CanvasWH;
    float width = u_CanvasWH.x / 2.0;
    float height = u_CanvasWH.y / 2.0;
    void main(){
        //gl_PointCoord似乎只有在画点上才有效, 如果是两个三角拼起来的就不行???
        //未必
        //好吧确实不行
        //gl_PointCoord.x与gl_PointCoord.y好像一直等于0.5
        if(gl_PointCoord.y * u_CanvasWH.y < height){
            if(gl_PointCoord.x * u_CanvasWH.x < width){
                gl_FragColor = m[0] / 255.0;
            }else{
                gl_FragColor = m[1] / 255.0;
            }
        }else{
            if(gl_PointCoord.x * u_CanvasWH.x < width){
                gl_FragColor = m[2] / 255.0;
            }else{
                gl_FragColor = m[3] / 255.0;
            }
        } 
    }
</script>
<!-- 方形标靶 -->
<script id="fragmentShader4" type="x-shader/x-fragment">
    precision mediump float;
    mat4 m = mat4(
        255,0,0,255,
        255,255,0,255,
        255,255,255,255,
        0,255,0,255
    );
    uniform vec2 u_CanvasWH;
    float width = u_CanvasWH.x / 2.0;
    float height = u_CanvasWH.y / 2.0;
    void main(){
        //好麻烦不写了
        if(gl_FragCoord.x < 0.125 * u_CanvasWH.x){
            gl_FragColor = m[0] / 255.0;
        }
        if(gl_FragCoord.x > 0.875 * u_CanvasWH.x){
            gl_FragColor = m[0] / 255.0;
        }
        if(gl_FragCoord.y < 0.125 * u_CanvasWH.y){
            gl_FragColor = m[0] / 255.0;
        }
        if(gl_FragCoord.y > 0.875 * u_CanvasWH.y){
            gl_FragColor = m[0] / 255.0;
            
        }
    }
</script>
<script id="fragmentShader5" type="x-shader/x-fragment">
    precision mediump float;
    mat4 m = mat4(
        255,0,0,255,
        255,255,0,255,
        255,255,255,255,
        0,255,0,255
    );
    uniform vec2 u_CanvasWH;
    float width = u_CanvasWH.x / 2.0;
    float height = u_CanvasWH.y / 2.0;
    void main(){
        //gl_PointCoord似乎只有在画点上才有效, 画线都不行
        gl_FragColor = vec4(gl_PointCoord.x,gl_PointCoord.y,0.5,1.0);
    }
</script>
<script id="fragmentShader6" type="x-shader/x-fragment">
    precision mediump float;
    void main(){
        vec3 v3 = vec3(3);
        vec2 v2 = vec2(2);
        vec4 v4 = vec4(v3,v2);

        
        vec4 v5 = vec4(10,20,30,40);
        vec4 v6 = vec4(v5.xz,v5.rg);
        v6.xy = vec2(100,200);
        gl_FragColor = v6 / 255.0;
    }
</script>
<script id="fragmentShader7" type="x-shader/x-fragment">
    precision mediump float;
    void main(){
        vec4 v4_1 = vec4(0,1,2,3);
        vec4 v4_2 = vec4(4,5,6,7);
        vec4 v4_3 = vec4(8,9,10,11);
        vec4 v4_4 = vec4(12,13,14,15);
        mat4 m = mat4(v4_1,v4_2,v4_3,v4_4); 
        mat4 m1 = mat4(v4_1,v4_2,v4_3,v4_4); 
        mat4 m2 = m * m1;
        gl_FragColor = (m2[0]) / 255.0;
    }
</script>
<script id="fragmentShader8" type="x-shader/x-fragment">
    precision mediump float;
    void main(){
        struct DemoA{
            vec4 nodeA;
            vec4 nodeB;
        };
        DemoA a = DemoA(
            vec4(0,1,2,3),
            vec4(4,5,6,7)
        );
        a.nodeA = vec4(8,9,10,11);


        vec4 v4[4];
        v4[0] = vec4(0,1,2,3);
        v4[1] = vec4(4,5,6,7);
        v4[2] = vec4(4,5,6,7);
        v4[3] = vec4(4,5,6,7);

        //mat4 m = mat4(v4);
        gl_FragColor = (v4[0]) / 255.0;
    }
</script>
<!-- 颜色置灰 -->
<script id="fragmentShader9" type="x-shader/x-fragment">
    precision mediump float;
    mediump vec4 v4;
    float getLum(vec3 color);
    void main(){
        
        vec3 color = vec3(255,255,0);
        float lum = getLum(color);
        gl_FragColor = vec4(vec3(lum),255) / 255.0;
    }
    float getLum(vec3 color){
        return dot(color,vec3(0.2126,0.7162,0.0722));
    }
    
</script>


<script type="module" src="../jsDemo/Demo131-打印向量2.js"></script>
<script>

</script>

</html>